import { Table, Tag } from 'ant-design-vue';
import { ColumnProps } from 'ant-design-vue/lib/table';
import { h } from 'vue';
import { DescItem } from '/@/components/Description';
import { YesOrNoEnum } from '/@/enums/sysEnum';

const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);

const tableRender = () => (curVal) => {
  if (curVal) {
    const data: Object = JSON.parse(curVal);
    const keys: Array<string> = Object.keys(data);
    if (Array.isArray(data)) {
      return h(Table, { dataSource: data, columns, size: 'small', bordered: true, pagination: false, rowExpandable: (record) => couldExpandRow(record), expandedRowRender: (record) => expandRowRender(record) });
    } else {
      if (keys.length < 2) {
        return h(Table, { dataSource: data[keys[0]], columns, size: 'small', bordered: true, pagination: false, rowExpandable: (record) => couldExpandRow(record), expandedRowRender: (record) => expandRowRender(record) });
      } else {
        const dataSource: Array<any> = [];
        keys.forEach((key: string) => {
          let item = {
            name: key,
            type: null,
            comment: null,
            valiMsgs: ''
          };
          dataSource.push(item);
          dataSource.push(...data[key]);
        });
        return h(Table, { dataSource, columns, size: 'small', bordered: true, pagination: false, rowExpandable: (record) => couldExpandRow(record), expandedRowRender: (record) => expandRowRender(record) });
      }
    }
  } else {
    return curVal;
  }
}

// 判断是否可以展开行，如果存在级联字段信息
const couldExpandRow: any = (record) => {
  return record.detail;
}

// 渲染级联字段的表格
const expandRowRender: any = (record: any) => {
  return h(Table, { dataSource: record.record.detail, columns, size: 'small', bordered: true, pagination: false });
}

const columns: ColumnProps[] = [
  {
    title: '字段名称',
    dataIndex: 'name',
    width: 200,
    align: 'center',
    customCell: (data: any) => {
      if (data.type == null) {
        return {
          colSpan: 4,
          align: 'left',
          style: [
            { 'background-color': '#fafafa' },
            { 'font-weight': 600 },
          ]
        };
      } else {
        return {};
      }
    }
  },
  {
    title: '字段类型',
    dataIndex: 'type',
    align: 'center',
    width: 120,
    customCell: (data: any) => {
      return {
        colSpan: data.type == null ? 0 : 1,
      };
    }
  },
  {
    title: '字段说明',
    dataIndex: 'comment',
    align: 'center',
    width: 200,
    customCell: (data: any) => {
      return {
        colSpan: data.type == null ? 0 : 1,
      };
    },
    customRender: (data: any) => {
      let desc = data.record.comment;
      if (data.record.remark) {
        desc = desc + data.record.remark;
      }
      return desc;
    },
  },
  {
    title: '验证信息',
    dataIndex: 'valiMsgs',
    width: 200,
    align: 'center',
    customCell: (data: any) => {
      return {
        colSpan: data.type == null ? 0 : 1,
      };
    }
  },
]

export const descItem: DescItem[] = [
  {
    field: 'name',
    label: '接口名称',
  },
  {
    field: 'title',
    label: '接口标题',
  },
  {
    field: 'path',
    label: '请求路径',
  },
  {
    field: 'method',
    label: '请求方式',
    render: commonTagRender('red'),
  },
  {
    field: 'code',
    label: '权限编号',
    render: commonTagRender('red'),
  },
  {
    field: 'login',
    label: '是否需要登录',
    render: (val) => {
      if (YesOrNoEnum.YES == val) {
        return '需要登录';
      } else {
        return '不需要登录';
      }
    },
  },
  {
    field: 'auth',
    label: '是否需要认证权限',
    render: (val) => {
      if (YesOrNoEnum.YES == val) {
        return '需要认证';
      } else {
        return '不需要认证';
      }
    },
  },
  {
    field: 'log',
    label: '是否需要记录日志',
    render: (val) => {
      if (YesOrNoEnum.YES == val) {
        return '记录日志';
      } else {
        return '不记录日志';
      }
    },
  },
  {
    field: 'encrypt',
    label: '是否需要加解密',
    render: (val) => {
      if (YesOrNoEnum.YES == val) {
        return '需要加解密';
      } else {
        return '不需要加解密';
      }
    },
  },
  {
    field: 'validateGroup',
    label: '数据校验分组',
  },
  {
    field: 'requestParam',
    label: '请求参数',
    span: 2,
    labelMinWidth: 120,
    render: tableRender()
  },
  {
    field: 'responseData',
    label: '响应信息',
    span: 2,
    labelMinWidth: 120,
    render: tableRender()
  },
];
